<template>
  <div class="collapse-panel-search">
    <a-input v-model="searchText" style="padding: 5px 0" placeholder="搜索关键字" @keyup.enter="onSearch">
      <a-icon slot="suffix" type="search" @click="onSearch" />
    </a-input>
    <a-collapse v-model="activeKey" :accordion="false" style="display: block; width: 100%">
      <a-collapse-panel
        v-for="item of originList"
        :key="item[fields.title]"
        :header="item[fields.title]"
        style="display: block; width: 100%"
      >
        <div v-for="subItem of item[fields.children]" :key="subItem[fields.key]" style="padding-left: 16px">
          <slot :itemData="subItem" />
        </div>
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>

<script>
export default {
  name: 'collapse-panel-search',
  components: {},
  props: {
    dataSource: { type: Array, default: () => [] },
    /*replaceFields: { label: "label", value: "value" }*/
    replaceFields: { type: Object, default: undefined },
  },
  data() {
    return {
      /* 可以是字符串-展开单个，可以是数组-展开多个 */
      activeKey: '',
      searchText: '',
      originList: [],
    };
  },
  computed: {
    fields() {
      const opt = {
        key: 'key',
        searchKey: 'name',
        title: 'title',
        children: 'children',
      };
      return Object.assign({}, opt, this.replaceFields);
    },
  },
  watch: {
    dataSource: {
      immediate: true,
      deep: true,
      handler() {
        this.originList = this.dataSource;
        if (this.originList && this.originList.length) {
          this.activeKey = this.originList[0].title;
        }
      },
    },
  },
  methods: {
    onSearch() {
      const filter = (list, predicate) => {
        if (!list || !list.length) return [];
        return list.filter((item) => predicate(item));
      };
      const format = (text) => {
        return text ? String(text).trim().toLowerCase() : '';
      };
      const { title, searchKey, children } = this.fields;
      const txt = format(this.searchText);
      if (!txt) {
        this.originList = this.dataSource;
        return;
      }
      this.originList = this.dataSource
        .map((item) => {
          return Object.assign({}, item, {
            children: filter(item[children], (subItem) => {
              return format(subItem[searchKey]).indexOf(txt) >= 0;
            }),
          });
        })
        .filter((item) => item[children] && item[children].length);
      if (this.originList && this.originList.length) {
        this.activeKey = this.originList.map((item) => item[title]);
      }
    },
  },
};
</script>
<style lang="less">
.collapse-panel-search {
  .ant-input-affix-wrapper {
    .ant-input {
      color: #ffffff;
      background: rgba(0, 0, 0, 0.15);
      border-color: rgba(24, 144, 255, 0.2);

      &:focus {
        border-color: rgba(24, 144, 255, 0.2);
        box-shadow: none;
        outline: none;
      }
    }

    .ant-input-suffix {
      color: #ffffff;
    }
  }
  .ant-collapse {
    width: 100%;
    height: calc(100% - 42px);
    overflow: hidden auto;
    background: none;
    border: 2px solid rgba(0, 0, 0, 0.15);

    &::-webkit-scrollbar {
      width: 3px;
      height: 3px;
    }

    &::-webkit-scrollbar-thumb {
      background: #2c3e50;
      border-radius: 100px;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    .ant-collapse-item {
      border: none;

      .ant-collapse-header {
        padding: 5px 10px 5px 20px;
        background: rgba(0, 0, 0, 0.15);
        font-size: 16px;
        font-weight: bold;
        color: #a0a0a0;
        cursor: pointer;

        & > i.anticon {
          left: 5px;
        }

        &:focus {
          border: none;
          outline: none;
        }
      }

      .ant-collapse-content > {
        background: none;
        border: none;

        .ant-collapse-content-box {
          display: flex;
          flex-direction: column;
          width: 100%;
          padding: 0;
        }
      }
    }
  }
}
</style>
